<template>
  <MyDrawer ref="myRef" title="相册管理" @submit="submit" @open="openDrawer" :disabled="false" width="30%">
    <el-form :model="drawerProps.row" ref="formRef" :rules="rules" label-width="80">
      <el-form-item label="选择分类" prop="category">
        <el-select
          v-model="drawerProps.row.category"
          placeholder="请选择相册分类"
          @change="changeFilter"
          :disabled="drawerProps.disabled"
        >
          <el-option v-for="(p, index) in categoryList" :key="index" :label="p.name" :value="p.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片名称">
        <el-input v-model="drawerProps.row.title"></el-input>
      </el-form-item>
      <el-form-item label="排序值">
        <el-input-number :min="1" :max="100000" v-model="drawerProps.row.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="选择相册" prop="url" v-if="drawerProps.row.category">
        <ChooseFile v-model:url="drawerProps.row.url" :cover="drawerProps.row.cover" @get-cover="getCover"></ChooseFile>
      </el-form-item>
      <el-form-item label="前往地址" prop="goUrl">
        <el-input v-model="drawerProps.row.goUrl" placeholder="请填写地址"></el-input>
        <span class="text-[var(--el-color-primary-light-5)]">不填则默认跳转到相册中,填写格式请以https开头代表跳转外部地址</span>
      </el-form-item>
    </el-form>
  </MyDrawer>
</template>

<script setup lang="ts">
import MyDrawer from "@/components/MyDrawer/index.vue";
import { onBeforeMount, ref } from "vue";
import { getCategoryList as getCategoryListApi } from "@/api/modules/swiper_category";

import { ElMessage, FormInstance, FormRules } from "element-plus";
import { validHttp } from "@/utils/eleValidate";
import ChooseFile from "@/components/ChooseFile/index.vue";

const categoryList = ref();

const getCategoryList = async () => {
  const { data } = await getCategoryListApi({ pageNum: 1, pageSize: 9999, type: 1 });
  categoryList.value = (data as any).list;
};

const myRef = ref<InstanceType<typeof MyDrawer> | null>();

interface DrawerProps {
  row: any;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
  disabled: boolean;
}

const disabled = ref(true);

const initData: any = {
  category: undefined,
  louPanId: 0,
  roomId: 0,
  cover: "",
  sort: 1,
  url: "",
  goUrl: "",
  title: ""
};

const rules: FormRules = {
  category: [{ required: true, message: "分类必须选择" }],
  url: [{ required: true, message: "封面或者图片必须选择" }],
  goUrl: [{ validator: validHttp }]
};

const drawerProps = ref<DrawerProps>({
  row: JSON.parse(JSON.stringify(initData)),
  disabled: false
});

const acceptParams = (params: any) => {
  console.log(params);
  if (params.row.category) {
    disabled.value = false;
  }
  if (params.row.cover) {
    filter.value = "video";
  } else {
    filter.value = "image";
  }
  drawerProps.value = params;
  myRef.value?.acceptParams();
};

const filter = ref("");

const changeFilter = (val: any) => {
  if (val !== 0) {
    disabled.value = false;
  }
  const item = categoryList.value.filter((e: any) => e.id === val)[0];
  if (item.isCover) {
    filter.value = "video";
  } else {
    filter.value = "image";
  }
};

const formRef = ref<FormInstance>();

// 获取封面
const getCover = (val: any) => {
  drawerProps.value.row.cover = val;
};

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      try {
        await drawerProps.value.api!(drawerProps.value.row);
        ElMessage.success("成功");
        await drawerProps.value.getTable!();
        myRef.value?.close();
      } catch (error) {}
    }
  });
};

const openDrawer = () => {};

onBeforeMount(() => {
  Promise.all([getCategoryList()]);
});

defineExpose({
  acceptParams
});
</script>

<style></style>
